<template>
  <div class="world">
    <div class="text">全球疫情地图<span>(这部分数据不准确）</span></div>
    <div class="box">
      <van-tabs v-model="active" @change="change">
        <van-tab title="现存确诊">
          <div id="w1" style="width: 100%;height:8rem;"></div>
        </van-tab>
        <van-tab title="现有确诊">
          <div id="w2" style="width: 100%;height:8rem;"></div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import 'echarts/map/js/world'
import api from '@/api/index'
import country from "@/utils/contury";
export default {
  data(){
    return{
      newArr:[],
      nowArr:[],
      active:0
    }
  },
  mounted() {
  api.getWorldData()
    .then(res=>{
      // console.log(res.data)
      var arr=res.data
      for(var i=0;i<arr.length;i++){
        var obj={}
        var obj1={}
        obj.name=arr[i].countryName
        obj.value=arr[i].currentConfirmedCount
        obj1.name=arr[i].countryName
        obj1.value=arr[i].confirmedCount
        this.newArr.push(obj)
        this.nowArr.push(obj1)
      }
      this.worldMap(this.newArr)
    })
  },
  methods:{
    worldMap(data){
      var myChart=this.$echarts.init(document.getElementById('w1'))
      var option={
        tooltip:{
          triggerOn:'click',
          enterable:true,
          formatter(item){
            return item.name+'现存确诊'+item.value;
          }
        },
        visualMap:[{
          orient:'vertical',
          type:'piecewise',
          itemWidth:14,
          bottom:0,
          pieces:[
            {
              min:0,
              max:0,
              color:'rgb(226,235,244)'
            },
            {
              min:1,
              max: 9,
              color: 'rgb(255,242,207)'
            },
            {
              min:10,
              max: 99,
              color: 'rgb(255,206,160)'
            },
            {
              min:100,
              max: 499,
              color: 'rgb(255,165,119)'
            },
            {
              min:500,
              max: 999,
              color: 'rgb(255,99,65)'
            },
            {
              min:1000,
              max: 9999,
              color: 'rgb(255,39,54)'
            },
            {
              min:10000,
              color: 'rgb(222,31,5)'
            },
          ]
        }],
        series:[{
          name:'国',
          type:'map',
          map:'world',
          nameMap:country,
          roam:false,
          zoom:1.2,
          aspectScale:0.75,
          top:40,
          layoutCenter:['5%','5%'],
          label:{
            normal:{
              show:false,
              textStyle:{
                fontSize:8
              }
            }
          },
          itemStyle:{
            normal: {
              areaColor:'rgba(0,255,236,0)',
              borderColor:'rgba(0,0,0,0.2)'
            },
            emphasis:{
              areaColor: 'rgba(255,180,0,0.8)',
              shadowOffsetX:0,
              shadowOffsetY:0,
              shadowBlur:20,
              borderWidth:0
            }
          },
          data
        }]
      }
      myChart.setOption(option)
    },
    worldMap1(data){
      var myChart=this.$echarts.init(document.getElementById('w2'))
      var option={
        tooltip:{
          triggerOn:'click',
          enterable:true,
          formatter(item){
            return item.name+'累计确诊'+item.value;
          }
        },
        visualMap:[{
          orient:'vertical',
          type:'piecewise',
          itemWidth:14,
          bottom:0,
          pieces:[
            {
              min:0,
              max:0,
              color:'rgb(226,235,244)'
            },
            {
              min:1,
              max: 9,
              color: 'rgb(255,242,207)'
            },
            {
              min:10,
              max: 99,
              color: 'rgb(255,206,160)'
            },
            {
              min:100,
              max: 499,
              color: 'rgb(255,165,119)'
            },
            {
              min:500,
              max: 999,
              color: 'rgb(255,99,65)'
            },
            {
              min:1000,
              max: 9999,
              color: 'rgb(255,39,54)'
            },
            {
              min:10000,
              color: 'rgb(222,31,5)'
            },
          ]
        }],
        series:[{
          name:'国',
          type:'map',
          map:'world',
          nameMap:country,
          roam:false,
          zoom:1.2,
          aspectScale:0.75,
          top:40,
          layoutCenter:['5%','5%'],
          label:{
            normal:{
              show:false,
              textStyle:{
                fontSize:8
              }
            }
          },
          itemStyle:{
            normal: {
              areaColor:'rgba(0,255,236,0)',
              borderColor:'rgba(0,0,0,0.2)'
            },
            emphasis:{
              areaColor: 'rgba(255,180,0,0.8)',
              shadowOffsetX:0,
              shadowOffsetY:0,
              shadowBlur:20,
              borderWidth:0
            }
          },
          data
        }]
      }
      myChart.setOption(option)
      // myChart1.setOption(option)
    },
    change(title){
      // console.log(title)
      if(title==1){
        this.$nextTick(()=>{
          this.worldMap1(this.nowArr)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.world{
  background-color: #ffffff;
  padding: 10px 0;
  margin-top: 5px;
  .text{
    border-left: 4px solid orange;
    margin-left: 20px;
    padding: 0 10px;
    span{
      color: #cccccc;
    }
  }
  .box{
    /deep/ .van-tabs__line {
      background-color: orange;
    }
  }
}
</style>

